<script setup>
import { Modal, message } from 'ant-design-vue';
import { onMounted, ref, reactive, markRaw } from 'vue';
import { webAppeallist, editappealstatus, deleteappeal } from '@/common/http.api.js'
import { formatDateTime } from '@/utils/formattime.js'
import { confirmDelete } from '@/utils/modalcomfir.js'
import tlTable from '@/components/Table/tlTable.vue'
import Content from './content.vue'

// 编辑状态
const visible = ref(false)
let data = {
    admID: sessionStorage.getItem('admID'),
    admName: sessionStorage.getItem('admName'),
    id:'',
    status:''
  }
const reason = ref('')

const editAppealstatus = (id, status) => {
  data.id = id
  if (status == '1') {
    data.status = status
    confirmDelete('处理诉求', '确定此诉求处理完成了吗？', async () => {
      await editappealstatus(data)
      message.success('处理成功')
      isRefrensh.value++
    })
  }else{
      visible.value = true
  }
}

const handleeditOk = async ()=>{
  if (!reason.value) return message.error('请填写原因！')
  data.reason = reason.value
  data.status = '2'
  await editappealstatus(data)
  message.success('驳回成功')
  isRefrensh.value++
  visible.value = false
}

// 删除
const deleteAppeal = (row) => {
  if(row.status == '0') return message.error('不允许删除未处理的诉求！')
  let id = row.id
  confirmDelete('删除诉求', '确定要删除此条诉求吗？', async () => {
    await deleteappeal({ id })
    message.success('删除成功')
    isRefrensh.value++
  })
}
// 详情
const rowData = reactive({ data: {} });
const currentComponent = reactive({});

const showContent = (row) => {
  rowData.data = row
  currentComponent.comName = componentList[0].comName;
}
//动态组件
const componentList = reactive([
  {
    name: "Content",
    comName: markRaw(Content),
  },
]); //组件可以有多个


const closeModal = (mark) => {
  currentComponent.comName = null; // 清空
  if (mark > 0) isRefrensh.value++; // 刷新表格
}

// 表格
const isRefrensh = ref(0);
const pageData = reactive({ page: 1, limit: 5 });
const searchData = ref([
  {
    label: "发起人:",
    prop: "uname",
    type: "input-complete",
    options: [],
    value: "",
  },
  {
    label: "处理人:",
    prop: "admName",
    type: "input-complete",
    options: [],
    value: "",
  },
  {
    label: "处理状态:",
    type: "select",
    value: "",
    prop: "status",
    options: [
      {
        value: "",
        label: "全部",
      },
      {
        value: "0",
        label: "待处理",
      },
      {
        value: "1",
        label: "已处理",
      },
      {
        value: "2",
        label: "已驳回",
      },
    ],
  },
  {
    label: "标题:",
    prop: "title",
    type: "input-complete",
    options: [],
    value: "",
  },
  {
    type: "clear-btn",
    style: { "right": '160px', "top": "25px" }
  },
  {
    type: "search-btn",
    style: { "right": '85px' }
  },
]);

const columns = ref([
  {
    title: "序号",
    width: "10%",
    customRender: (v) => {
      return <div>{`${v.index + 1}`}</div>;
    },
  },
  {
    title: "发起人",
    dataIndex: "uname",
    key: "uname",
  },
  {
    title: "标题",
    dataIndex: "title",
    key: "title",
  },
  {
    title: "发起时间",
    dataIndex: "ctime",
    key: "ctime",
    align: "center",
    renderDom: (h, row) => <div>{formatDateTime(row.ctime)}</div>
  },
  {
    title: "处理状态",
    dataIndex: "status",
    key: "status",
    align: 'center',
    renderDom: (h, row) => {
      let dom = null;
      if (row.status == '0') {
        dom = <a-button type="link" danger>待处理</a-button>
      } else if (row.status == '1') {
        dom = <div>已处理</div>
      } else {
        dom = (<a-tooltip title={'原因：' + row.reason}>
          <a-button type="link" >已驳回</a-button>
        </a-tooltip>)
      }
      return dom
    }
  },
  {
    title: "处理人",
    dataIndex: "admName",
    key: "admName",
  },
  {
    title: "评价",
    dataIndex: "evaluation",
    key: "evaluation",
    renderDom: (h, row) => {
      if (row.evaluation == null) {
        return <div>--</div>
      }
      return <div>{row.evaluation}</div>
    }
  },
  {
    title: "操作",
    align: "center",
    width: '16%',
    renderDom: (h, row) => {
      let show = { display: 'block' }
      let style = { display: 'flex', justifyContent: 'center' }
      if (row.status != '0') show = { display: 'none' }
      return (
        <div style={style}>
          <div style={{ ...show, pading: '0 30px' }}>
            <a-button
              type="link"
              size="small"
              onClick={() => {
                editAppealstatus(row.id, '1')
              }}
            >
              完成
            </a-button>|
            <a-button
              type="link"
              size="small"
              onClick={() => {
                editAppealstatus(row.id, '2')
              }}
            >
              驳回
            </a-button>
          </div>
          <div style={{ pading: '0 30px' }}>
            <a-button
              type="link"
              size="small"
              onClick={() => {
                showContent(row)
              }}
            >
              详情
            </a-button>|
            <a-button
              type="link"
              size="small"
              onClick={() => {
                deleteAppeal(row)
              }}
            >
              删除
            </a-button>
          </div>
        </div>
      );
    },
  },
]);
</script>


<template>
  <div>
    <div><tl-table :columns="columns" :pageData="pageData" :searchData="searchData" :isRefrensh="isRefrensh"
        :renderTable="webAppeallist">
        <template v-slot:title>诉求列表</template>
      </tl-table>
    </div>
    <component :row="rowData" :is="currentComponent.comName" @on-close="closeModal"></component>
    <a-modal v-model:visible="visible" title="驳回诉求" @ok="handleeditOk">
      <div style="margin-bottom:10px">输入驳回原因：</div>
      <a-input v-model:value="reason" :maxlength="25" placeholder="驳回原因" />
    </a-modal>
 </div>
</template>
